<template>
    <div>
        <div class="mui-card">
				<div class="mui-card-header mui-card-media" style="height:40vw;background:#6e50e8"></div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>我的订单</p>
						<p style="color: #333;" class='dingdan'>
                            <div class="icon">
                                <span class="mui-icon mui-icon-extra mui-icon-extra-card"></span>
                                <span class="mui-icon mui-icon-spinner mui-spin"></span>
                                <span class="mui-icon mui-icon-extra mui-icon-extra-express"></span>
                                <span class="mui-icon mui-icon-chatboxes"></span>
                            </div>
                            <div class="font">
                                <span>待付款</span>
                                <span>待发货</span>
                                <span>待收货</span>
                                <span>待评价</span>
                            </div>
                        </p>
					</div>
                    <div class="touxiang"></div>
				</div>
				<div class="mui-card-footer">
					<a class="mui-card-link"></a>
					<a class="mui-card-link">查看全部订单 ></a>
				</div>
			</div>

            <div class="mui-card">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell"><a class="mui-card-link">优惠券</a></li>
                    <li class="mui-table-view-cell"><a class="mui-card-link">优惠码</a></li>
                    <li class="mui-table-view-cell"><a class="mui-card-link">我的赠品</a></li>
                    <li class="mui-table-view-cell"><a class="mui-card-link">订单返现</a></li>
                </ul>
            </div>
    </div>
</template>

<style lang="scss" scoped>
    .mui-card{
        position: relative;
        .touxiang{
            width: 60px;
            height: 60px;
            background-color: #ccc;
            position: absolute;
            top: -108px;
            left: 20px;
            border-radius: 50%;
            background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548833867836&di=85f3525abc6f7d734dec56f599ba327e&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201704%2F27%2F20170427155254_Kctx8.jpeg);
            background-size: cover;
            &:after{
                content: 'vue_201901301257';
                width: 10px;
                height: 10px;
                position: absolute;
                top: 19px;
                left: 80px;
                font-weight: 800;
            }
        }
        .icon{
            display: flex;
            justify-content:space-between;
            .mui-icon{
                font-size: 40px;
            }
            :nth-child(3){
                margin-top: 5px;
            }
            :nth-child(2){
                margin-top: 10px;
                font-size: 30px;
            }
            :nth-child(4){
                margin-top: 8px;
                font-size: 35px;
            }
            
        }
        .font{
            display: flex;
            justify-content:space-between;
            margin-top: 8px;

            :nth-child(3){
                margin-left: 4px;
            }
        }

        
    }
    
    
</style>